<template>
    <div :componentsData="componentsData">
        <span style="color:green;font-weight:bold">{{title}}：</span>
        <a-button v-if="editable" size="small" type="primary" @click="handleAddRow()">新增</a-button>
        <a-table
            size="small"
            :columns="columns"
            :dataSource="columnsData"
            :pagination="false"
            :rowKey="record => record.index"
            style="clear:right;overflow:auto;margin-top:8px"
        >
            <span
                v-for="(widget,i) in widgets"
                :key="i"
                :slot="widget.slot"
                slot-scope="text, record, index"
            >
                <!-- <pre>{{text}}</pre> -->

                <a-input
                    v-if="widget.type === 'input'"
                    size="small"
                    v-model="columnsData[index].input"
                ></a-input>
                <a-select
                    v-if="widget.type === 'select'"
                    placeholder
                    size="small"
                    v-model="columnsData[index].select"
                >
                    <a-select-option
                        v-for="option in widget.options"
                        :key="option"
                        :value="option"
                    >{{ option }}</a-select-option>
                </a-select>
                <a-date-picker
                    v-if="widget.type === 'timePicker'"
                    show-time
                    type="date"
                    :style="{'minWidth': '100%',}"
                    placeholder="选择日期"
                    v-model="columnsData[index].timePicker"
                />
                <a-input-number
                    v-if="widget.type === 'inputNumber'"
                    :min="1"
                    :max="10"
                    v-model="columnsData[index].inputNumber"
                />

                <div v-if="widget.type === 'button'" style="display:flex">
                    <a-button size="small">{{columnsData[index].button}}</a-button>
                    <a-input size="small" style="margin-left:10px"></a-input>
                </div>
                <div v-if="widget.type === 'upload'" style="display:flex">
                    <a-upload
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        list-type="picture"
                        :default-file-list="fileList"
                        class="upload-list-inline"
                    >
                        <a-button>
                            <a-icon type="upload" />上传
                        </a-button>
                    </a-upload>
                </div>
            </span>
            <!-- 操作 -->
            <template v-if="editable" slot="action" slot-scope="text, record">
                <span>
                    <a href="javascript:;" @click="handleDeleteRow(record)">删除</a>
                </span>
            </template>
        </a-table>
    </div>
</template>

<script>
import moment from "moment";
export default {
    props: {
        componentsData: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            title: "",
            editable: false,
            columns: [],
            columnsData: [],
            columnsData2: [],
            widgets: [],
            columnObj: {},
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        moment,
        initData() {
            console.log(this.componentsData);
            this.title = this.componentsData.title;
            this.editable = this.componentsData.editable;
            this.columns = this.componentsData.columns;
            this.widgets = this.editable ? this.componentsData.widgets : [];
            this.columnsData = this.componentsData.columnsData;
            this.columnsData2 = this.$common.deepClone(this.columnsData);
            this.columnObj = this.getColumnObj();
        },
        handleAddRow() {
            this.columnsData.push(this.getColumnObj());
            this.setNewIndex();
        },
        getColumnObj() {
            let obj = {};
            this.columns.forEach(item => {
                if (item.dataIndex) {
                    obj[item.dataIndex] = "";
                }
            });
            return obj;
        },
        handleDeleteRow(record) {
            let self = this;
            this.columnsData = this.columnsData.filter(item => {
                return item.index != record.index;
            });
            this.setNewIndex();
        },
        setNewIndex() {
            this.columnsData.forEach((item, index) => {
                item.index = index + 1;
            });
        },
    },
    // 监听父组件数据变化
    watch: {
        componentsData: {
            handler(newValue, oldValue) {
                this.initData();
            },
            deep: true,
        },
    },
};
</script>

<style>
</style>